<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>员工统计</title>
    <script src="../../lib/jquery-3.6.0.min.js"></script>
    <script src="../../lib/echarts.min.js"></script>
<!--    <script src="../../lib/layui-v2.6.3/layui.js" charset="utf-8"></script>-->
<!--    <link rel="stylesheet" href="../../lib/layui-v2.6.3/css/layui.css" media="all">-->
<!--    <link rel="stylesheet" href="../../css/public.css" media="all">-->

    <style>
        .dv{
            width: 80%;
            height: 500px;
            margin-top: 30px;
            margin-left: 10%;
        }
    </style>
</head>
<body>
<div>
    <div class="dv" id="dv1"></div>
    <div class="dv" id="dv2"></div>
</div>
<script>
    var dv1 = document.getElementById('dv1');
    var chart = echarts.init(dv1);

    option = {
        title: {
            text: '员工性别比例',
            subtext: '男 女',
            left: 'center'
        },
        tooltip: {
            trigger: 'item'
        },
        legend: {
            orient: 'vertical',
            left: 'left'
        },
        series: [
            {
                name: '人数',
                type: 'pie',
                radius: '50%',
                data: [
                    { value: 1048, name: 'Search Engine' },
                    { value: 735, name: 'Direct' },
                    { value: 580, name: 'Email' },
                    { value: 484, name: 'Union Ads' },
                    { value: 300, name: 'Video Ads' }
                ],
                emphasis: {
                    itemStyle: {
                        shadowBlur: 10,
                        shadowOffsetX: 0,
                        shadowColor: 'rgba(0, 0, 0, 0.5)'
                    }
                }
            }
        ]
    };

    var dv2 = document.getElementById("dv2");
    var charts2 = echarts.init(dv2);

    option2 = {
        title: {
            text: '部门人数'
        },
        toolbox: {
            show: true,
            feature: {
                dataZoom: {
                    yAxisIndex: 'none'
                },
                dataView: { readOnly: false },
                magicType: { type: ['line', 'bar'] },
                restore: {},
                saveAsImage: {}
            }
        },
        xAxis: {
            type: 'category',
            data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
        },
        yAxis: {
            type: 'value'
        },
        series: [
            {
                data: [150, 230, 224, 218, 135, 147, 260],
                type: 'line'
            }
        ]
    };
    charts2.setOption(option2);

    $(() => {
        countSex();
        countDepartment();
    })

    function countSex() {
        $.get("/api/emp/countSex.do", (res) => {
            option.series[0].data = res.data;
            console.log(res.data);
            chart.setOption(option);
        })
    }

    function countDepartment() {
        $.get("/api/emp/countDep.do", (res) => {
            option2.xAxis.data = res.data.dnames;
            option2.series[0].data = res.data.nums;
            charts2.setOption(option2);
        })
    }
</script>
</body>
</html>